<template>
	<view class="page">
		<view class="stateArr">
			<view @click="changeState(item.type)" class="stateItem" v-for="(item,index) in stateArr" :key="index">
				<text :class="activeType==item.type ? 'activeIndex' :''">
					{{item.name}}
				</text>
			</view>
		</view>
		
		<view class="">
			<scroll-view scroll-y="true" style="height: 83vh;" @scrolltolower="scrolltolower" >
				<view class="arrItem" v-for="(item,index) in ParticipateArr" :key="index" >
					<view class="box" >
						<view class="top-box">
							<view class="teamNo">
								第 {{item.term_number}} 期
							</view>
							<view class="time">
								参与时间: {{item.create_time_text}}
							</view>
						</view>
						<view class="content-box" @click="junit('/pages/theBestBox/joinRecordDetail',{term_id: item.term_id})">
							<view class="cover">
								<u-image    width="140" height="140" lazy-load :src="item.goods_image" :fade="true" duration="450">
									<u-loading slot="loading"></u-loading>
								</u-image>
							</view>
							<view class="content">
								<view class="title">
									{{item.name}}
								</view>
								<view class="text">
									<text>￥{{item.price}}</text>
								</view>
							</view>
							<view class="right-box">
								<view :class="item.status==0 || item.status==1 ? 'btn activeBtn' : 'btn' ">
									{{item.status_text}}
								</view>
								<view class="line-box" v-if="item.status_text == '拆盒中'">
									<u-line-progress style="height: 11upx; width: 77upx;" active-color="#FE5E10"  :percent="(item.blindbox_progress/100)*100" :show-percent="false">
									</u-line-progress>
									<text> <text class="activeColor"> {{item.open_number}} </text> /{{item.total_number}} </text>
								</view>
							</view>
						</view>
						<view class="bottom-box" v-if="item.prize_type==0 && item.status_text=='已拆中'">
							<!-- <view class="bottom-item"  @click.stop="confirmBarter(item.id)"> -->
							<view class="bottom-item"  @click.stop="yihuoShow(item)">
								<image src="../../static/images/other/change.png" mode=""></image>
								我要易货
							</view>
							<view class="bottom-item"  @click.stop="confirmDelivery(item.id)">
								<image src="../../static/images/other/fahuo.png" mode=""></image>
								我要发货
							</view>
						</view>
						<view class="bottom-box" v-if="item.prize_type==2 && item.status_text=='已拆中'">
							<view class="bottom-item">
								<image src="../../static/images/other/change.png" mode=""></image>
								易货成功获得 <text style="color:#fe5e10;">{{item.point}}</text>积分
							</view>
						</view>
						<view class="bottom-box" v-if="item.order_status_name=='待发货' || item.order_status_name=='已发货'">
							<view class="bottom-item">
								<image src="../../static/images/other/fahuo.png" mode=""></image>
								{{item.order_status_name}}
							</view>
							<view class="bottom-item"  v-if="item.order_status_name=='已发货'">
								<view class="btn" @click.stop="goPage('/pages/prefile/express-list/express-list',{id: item.order_id})">
									查看物流
								</view>
							</view>
						</view>
						<view class="bottom-box" v-if="false">
							<view class="bottom-item">
								<image src="../../static/images/other/fahuo.png" mode=""></image>
								已发货
							</view>
							
						</view>
						
					</view>
					
				</view>
				<noMre v-if="!ParticipateArr.length"></noMre>
			</scroll-view>
		</view>
		
		<!--  -->
		<u-modal title="请选择发货地址" v-model="confirmAddressShow" @confirm="confirmAddress"  show-cancel-button :mask-close-able="true">
			<scroll-view scroll-y="true" style="height: 600rpx;" >
				<view class="slot-content">
					<view class="address-list" v-for="address in addressList" :key="address.id" @click="selectAddress(address)">
						<view :class="selectAddressObj.id == address.id ? 'icon activeIcon' : 'icon' " >
						</view>
						<view class="top u-flex">
							<text class="name">{{ address.name }}</text>
							<text class="phone">{{ address.mobile }}</text>
							<text class="tag" v-show="address.is_default==1">默认</text>
						</view>
						<view class="detail">
							{{ address.full_address }}{{address.address}}
						</view>
					</view>
					<view class="tips" @click="goPage('/pages/prefile/address/list')" style="color: #F70909;" v-if="!addressList.length">
						您还未完善收件信息，点击去完善
					</view>
				</view>
			</scroll-view>
			
		</u-modal>	
		
		<!-- 易货确认 -->
		<u-mask :show="yihuoConfirmShow">
				<view class="warp">
					<view class="box">
						<view class="title">
							易货
						</view>
						<view class="good">
							<image :src="goodsObj.goods_image" mode=""></image>
							<view class="desc">
								<view class="name">
									{{goodsObj.name}}
								</view>
								<view class="price">
									￥{{goodsObj.price}}
								</view>
							</view>
						</view>
						<view class="point">
							<image src="../../static/images/other/change.png" mode=""></image>
							易货可获得 {{goodsObj.point}} 积分
						</view>
						<view class="tips">
							确认易货后，此商品会转换成积分，积分可以 在兑换商城兑换商品，或者参与抽奖。确认后 不可撤销，请谨慎操作
						</view>
						<view class="bottomBtns">
							<view class="btnItem" @click="yihuoConfirmShow = false">
								取消
							</view>
							<view class="btnItem" @click="confirmBarter()">
								确认
							</view>
						</view>
					</view>
				</view>
		</u-mask>
	
		<!-- 易货成功 -->
		<u-mask :show="yihuoSuc">
				<view class="warp">
					<view class="box">
						<view class="title">
							易货成功
						</view>
						<view class="sucPoint">
							<image src="../../static/images/other/jifen.png" mode=""></image>
							<text>获得 {{goodsObj.point}} 积分</text>
						</view>
						<view class="tips">
							积分可以在兑换商城兑换，或者参与抽奖。 
						</view>
						<view class="confirmBtn" @click="yihuoSuc=false">
								确认
						</view>
					</view>
				</view>
		</u-mask>
	</view>
</template>

<script>
	import noMre from '@/components/noMore/noMore.vue'
	export default {
		data() {
			return {
				// 盲盒红包类型
				stateArr:[
					{
						name:'全部',
						type: -1 ,
					},
					{
						name:'拆盒中',
						type: 0 ,
					},
					{
						name:'已拆中',
						type: 1,
					},
					{
						name:'未拆中',
						type: 2,
					},
					{
						name:'失败',
						type: 3,
					},
				],
				activeType: -1 ,
				ParticipateArr:[],//参与列表
				// type:1,
				page : 1,
				confirmAddressShow : false,
				selectAddressObj:{},
				addressList:[],
				prize_id:'',
				yihuoConfirmShow: false,
				yihuoSuc : false,
				goodsObj:{},
			};
		},
		components:{
			noMre
		},
		onLoad({type}) {
			if(type){
				this.activeType = type
			}
		
		},
		onShow() {
			this.getAllParticipateArr()
			this.getAddressList()
		},
		methods:{
			yihuoShow(_item){
				this.yihuoConfirmShow = true
				this.goodsObj = _item
			},
			// 易货
			confirmBarter(_id){
				this.myHttp({
					url: '/surpriseblindbox/api/Blindbox/pointBarter',
					data:{
						prize_id : this.goodsObj.id,
					}
				}).then(res=>{
					if(res.code==0){
						this.getAllParticipateArr()
						this.yihuoConfirmShow = false
						this.yihuoSuc = true
						// uni.showToast({
						//     title: '易货成功',
						//     duration: 3000,
						// });
					}
					
				})
			},
			confirmDelivery(_id){
				this.confirmAddressShow = true
				this.prize_id = _id
			},
			confirmAddress(){
				if(!this.selectAddressObj.id){
					if(!this.addressList.length){
						return this.goPage('/pages/prefile/address/list')
					}
					return uni.showToast({
					    title: '请选择地址',
					    duration: 3000,
					    icon: 'none'
					});
				}
				this.myHttp({
					url: '/surpriseblindbox/api/Blindbox/sendGoods',
					data:{
						prize_id : this.prize_id,
						address_id : this.selectAddressObj.id,
					}
				}).then(res=>{
					if(res.code==0){
						uni.showToast({
						    title: '发货成功',
						    duration: 3000,
						});
						this.getAllParticipateArr()
					}
				})
			},
			selectAddress(_address){
				this.selectAddressObj = _address
				console.log(this.selectAddressObj);
			},
			getAddressList() {
				this.myHttp({
					url: '/api/memberaddress/page',
				}).then(res=>{
					this.addressList = res.data.list;
				})
			},
			scrolltolower(){
					this.page++
					this.getAllParticipateArr()
			},
			changeState(_index){
				this.page = 1
				this.activeType = _index
				this.getAllParticipateArr()
			},
			// 参与列表
			async getAllParticipateArr(){
				await this.myHttp({
					url: '/surpriseblindbox/api/Blindbox/myBlindboxList',
					data:{
						status : this.activeType,
						page : this.page,
						page_size : 10,
					}
				}).then((res)=>{
						if(this.page==1){
							this.ParticipateArr = []
						}
						this.ParticipateArr = this.ParticipateArr.concat(res.data.list) 
						// console.log(this.ParticipateArr);
				})
			},
		},
		filters:{
			
		},
	}
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		.box{
			width: 75vw;
			height: 639rpx;
			background: #FFEFE7;
			border: 8rpx solid #FE5E10;
			border-radius: 20rpx;
			@include flexCol;
			align-items: center;
			.title{
				width: 100%;
				padding: 47rpx 0;
				color: $themeColor;
				@include flexCenter;
			}
			.sucPoint{
				@include flexCol;
				align-items: center;
				image{
					width: 124rpx;
					height: 124rpx;
					margin: 30rpx 0;
				}
				text{
					color: $themeColor;
				}
			}
			.good{
				width: 90%;
				height: 139rpx;
				background: #FFFFFF;
				display: flex;
				border-radius: 10rpx;
				padding: 18rpx;
				image{
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
				}
				.desc{
					font-size: 28rpx;
					@include flexCol;
					justify-content: space-between;
					.name{
						color: #222020;
					}
					.price{
						color: #979797;
					}
				}
			}
			.point{
				width: 90%;
				height: 57rpx;
				background: #FFD2BC;
				display: flex;
				align-items: center;
				border-radius: 10rpx;
				margin: 16rpx 0;
				image{
					width: 41rpx;
					height: 41rpx;
					margin-right: 20rpx;
				}
				color: $themeColor;
			}
			.tips{
				width: 90%;
				margin: 30rpx 0;
				color: #979797;
				font-size: 24rpx;
				text-align: center;
			}
			.confirmBtn{
				color: #fff;
				background-color: $themeColor;
				@include flexCenter;
				width: 95%;
				padding: 20rpx 0;
				border-radius: 20rpx;
				margin-top: 50rpx;
			}
			.bottomBtns{
				display: flex;
				justify-content: space-between;
				width: 95%;
				.btnItem{
					width: 45%;
					height: 74rpx;
					background: #FFDFCF;
					border-radius: 10rpx;
					@include flexCenter;
					font-size: 33rpx;
					color: #FE5E10;
					&:nth-child(2){
						color: #fff;
						background-color: $themeColor;
					}
				}
			}
		}
	}
	
	
	.slot-content{
		@include flexCol;
		align-items: center;
		.address-list {
			position: relative;
			margin-top: 20rpx;
			width: 80%;
			height: 155rpx;
			border-radius: 20rpx;
			@include flexCol;
			justify-content: center;
			padding-left: 40rpx;
			border: 2rpx solid #EBEEF5;
			.activeIcon{
				background-color: $themeColor;
			}
			.icon{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: -8%;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					width: 35rpx;
					height: 35rpx;
					border: 3rpx solid #eee;
					border-radius: 50%;
				}
			}
			.name {
				font-size: 30rpx;
				font-weight: 600;
			}
		
			.phone {
				font-size: 30rpx;
				margin: 0 20rpx;
			}
		
			.tag {
				background: rgba(233, 191, 113, 0.2);
				border-radius: 6rpx;
				padding: 0 16rpx;
				line-height: 38rpx;
				color: #a8700d;
				font-size: 22rpx;
			}
		
			.detail {
				margin-top: 25rpx;
				width: 543rpx;
				font-size: 26rpx;
		
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				line-height: 40rpx;
			}
		
		}
		.tips{
			margin-top: 100rpx;
			
		}
	}
	
	
.page{
	background-color: #f4f4f4;
	width: 100%;
	height: 100%;
	// height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	.stateArr{
		height: 10vh;
		width: 100%;
		background-color: $themeColor;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		color: #fff;
		font-size: 34rpx;
		.stateItem{
			position: relative;
			.activeIndex{
				&::after{
					content: '';
					position: absolute;
					bottom: -50%;
					left: 50%;
					transform: translateX(-50%);
					width: 100rpx;
					height: 8rpx;
					border-radius: 5rpx;
					background-color: #fff;
				}
			
			}
		}
	}

	.arrItem{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 20rpx;
		margin-top: 30rpx;
		.box{
			background-color: #fff;
			// height: 180rpx;
			width: 90vw;
			border-radius: 20rpx;
			padding: 20rpx;
			.top-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				border-bottom: 2rpx solid #eee;
				padding-bottom: 20rpx;
				.teamNo{
					background-color: #f3f3f3;
					padding: 10rpx 20rpx;
					font-size: 26rpx;
				}
				.time{
					color: #7d7d7d;
					font-size: 24rpx;
				}
			}
			.content-box{
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				padding-top: 20rpx;
				.cover{
					width: 140rpx;
					height: 140rpx;
					image{
						width: 100%;
					}
				}
				.content{
					flex: 1;
					padding-left: 30rpx;
					.title{
						font-size: 28rpx;
						color: #222020;
					}
					.text{
						margin-top: 20rpx;
						color: #999999;
						text{
							color: #fe5011;
						}
					}
				}
				
				.right-box{
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.btn{
						width: 140rpx;
						height: 60rpx;
						display: grid;
						place-items: center;
						color: #fff;
						background-color: #bfbfbf;
						border-radius: 10rpx;
					}
					.activeBtn{
						background-color: #fe5011 !important;
					}
					.line-box{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text{
							color: #C6C6C6;
						}
						.activeColor{
							color: #FE5E10;
						}
					}
				}
				
				
			}
			.bottom-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 2rpx solid #eee;
				padding: 25rpx 0 10rpx;
				.bottom-item{
					height: 100%;
					display: flex;
					align-items: center;
					.btn{
						width: 121rpx;
						height: 45rpx;
						border: 2rpx solid #FE5E10;
						border-radius: 10rpx;
						@include flexCenter;
						color: #FE5E10;
						font-size: 22rpx;
					}
					image{
						width: 37rpx;
						height: 37rpx;
						margin-right: 20rpx;
					}
				}
			}
		
			
		}
	}
}

</style>
